<template>
  <div class="qustions-preview">
    <el-dialog
      title="题目预览"
      :visible.sync="show"
      width="900px"
      @close="close()"
    >
      <el-row>
        <el-col :span="6" v-if="myData.questionType == '1'"
          >【题型】: 单选</el-col
        >
        <el-col :span="6" v-else-if="myData.questionType == '2'"
          >【题型】：多选</el-col
        >
        <el-col :span="6" v-else>【题型】：简答</el-col>
        <el-col :span="6">【编号】：{{ myData.id }}</el-col>
        <el-col :span="6" v-if="myData.difficulty == '1'"
          >【难度】：简单</el-col
        >
        <el-col :span="6" v-else-if="myData.difficulty == '2'"
          >【难度】：一般</el-col
        >
        <el-col :span="6" v-else>【难度】：困难</el-col>

        <el-col :span="6">【标签】：{{ myData.tags }}</el-col>
        <br /><br />
        <el-col :span="6">【学科】：{{ myData.subjectName }}</el-col>
        <el-col :span="6">【目录】：{{ myData.directoryName }}</el-col>
        <el-col :span="6">【方向】：{{ myData.direction }} </el-col>
      </el-row>
      <br />
      <hr style="background-color: #ccc; height: 2px; border: none" />
      <el-row>【题干】：</el-row>
      <el-row>
        <template>
          <div v-html="myData.question" style="color: #3333ff"></div>
        </template>
      </el-row>
      <!-- 渲染单选 -->
      <el-row v-if="myData.questionType == '1'">
        此题为单选题
        <div
          v-for="(item, index) in myData.options"
          :key="index"
          style="padding: 10px 0"
        >
          <el-radio
            :value="item.isRight"
            :disabled="!item.isRight"
            :label="1"
            >{{ item.title }}</el-radio
          >
        </div>
      </el-row>
      <!-- 渲染多选 -->
      <el-row v-else-if="myData.questionType == '2'">
        此题为多选题
        <div
          v-for="(item, index) in myData.options"
          :key="index"
          style="padding: 10px 0"
        >
          <el-checkbox
            :value="item.isRight ? true : false"
            :disabled="!item.isRight"
            >{{ item.title }}</el-checkbox
          >
        </div>
      </el-row>
      <!-- 渲染多选 -->
      <el-row v-else>
        此题为简答题
        <div style="margin-top: 10px">简答题 解析：略</div>
      </el-row>
      <hr style="background-color: #ccc; height: 2px; border: none" />
      <!-- 视频答案预览 -->
      <el-row style="margin: 10px 0">
        【参考答案】：<el-button
          type="danger"
          size="mini"
          @click="preivewVideo()"
          >视频答案预览</el-button
        >
        <div class="video" v-show="play">
          <video ref="video" :src="myData.videoURL" controls></video>
        </div>
      </el-row>
      <hr style="background-color: #ccc; height: 2px; border: none" />
      <el-row
        >【答案解析】：
        <div v-html="myData.answer" style="display: inline-block"></div
      ></el-row>
      <hr style="background-color: #ccc; height: 2px; border: none" />
      <el-row style="margin: 10px 0">【题目备注】：{{ myData.remarks }}</el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="show = false">取 消</el-button>
        <el-button type="primary" @click="show = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { choicePreview } from "@/api/hmmm/questions"; 
import { detail } from "@/api/hmmm/questions";

export default {
  name: "QuestionsPreview",
  props: {
    data: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      show: false,
      myData: {},
      play: false,
    };
  },
  methods: {
    async open() {
      this.show = true;
      // 拿到数据
      const res = await detail({ id: this.data.id });
      this.myData = res.data;
      console.log(this.myData);
    },
    preivewVideo() {
      this.play = true;
      this.$refs.video.play();
    },
    close() {
      this.play = false;
      this.$refs.video.pause();
      this.$refs.video.currentTime = 0;
    },
  },
};
</script>

<style scoped lang='less'>
.video {
  width: 500px;
  height: 350px;
  video {
    width: 100%;
    height: 100%;
  }
}
video:focus {
  outline: none;
}
</style>
